<template>
  <div class="content">
    <div  style="
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 20px;
          display: flex;
          z-index:999;
          flex-direction: column;
          align-items: center;
          justify-content: center;"
          :append-to-body="true"
    >
      <div class="cover">
        <div class="cover-top">
          <div class="top-left">
            <div class="sign"></div>
            <!--     农村劳动力       -->
            <div class="title" v-if="type==1">{{name}}</div>
            <!--     全市城镇劳动力       -->
            <div class="title" v-if="type==2">{{name}}</div>
            <!--     全市劳动力       -->
            <div class="title" v-if="type==3">{{name}}</div>
            <div class="title" v-if="type==4">{{name}}农村劳动力</div>
            <div class="title" v-if="type==5">{{name}}求职人数</div>
            <div class="title" v-if="type==6">{{name}}简历投递人</div>
            <div class="title" v-if="type==7">{{name}}简历投递量</div>
          </div>
          <div class="top-right" @click="onCloseDialog">×</div>
        </div>
<!--        <div class="cover-middle" v-if="type!=5&&type!=6">-->
<!--          <div class="village" v-if="type==1&&name!='敦煌'&&name!='瓜州'&&name!='玉门'||type==4">村/乡镇：-->
<!--            <el-cascader-->
<!--                v-model="streetId"-->
<!--                :options="communityList"-->
<!--                :props="{ value:'id',label:'name',children:'child' }"-->
<!--                @change="changeCommunity"></el-cascader>-->

<!--          </div>-->

<!--          <div class="street" v-else-if="type==2||type==3||type==7">街道/社区：-->
<!--            <el-cascader-->
<!--                v-model="streetId"-->
<!--                :options="streetList"-->
<!--                :props="{ value:'id',label:'name',children:'child' }"-->
<!--                @change="changeStreet"></el-cascader>-->

<!--          </div>-->
<!--        </div>-->
        <template v-if="type==6">
          <div class="cover-bottom">
            <el-table
                :data="tableData"
                style="width: 100%;">
              <el-table-column
                  prop="customer.id"
                  label="序号"
                  width="100"
              >
              </el-table-column>
              <el-table-column
                  prop="customer.realName"
                  width="100"
                  label="姓名"
              >
              </el-table-column>
              <el-table-column prop="customer.sex" width="50" label="性别">
                <template slot-scope="scope">
                  <span v-if="scope.row.customer.sex==1" style="color: #fff">男</span>
                  <span v-if="scope.row.customer.sex==2" style="color: #fff">女</span>
                </template>
              </el-table-column>
              <el-table-column  prop="customer.mobile"  label="联系电话"></el-table-column>

              <el-table-column  width="100"
                  prop="customer.birthday"
                  label="出生日期"
              >
              </el-table-column>
              <el-table-column
                  prop="enterpriseModel.enterpriseName"
                  label="投递的公司"
              >
              </el-table-column>
              <el-table-column
                  prop="jobPublish.jobTitle"
                  label="投递的岗位"
              >
              </el-table-column>
              <el-table-column
                  prop="crtTime"
                  label="投递的时间"
              >
              </el-table-column>
            </el-table>
          </div>
        </template>
        <template v-if="type==5">
          <div class="cover-bottom">
            <el-table
                :data="tableData"
                style="width: 100%;">
              <el-table-column
                  prop="customer.id"
                  label="序号"
                  width="100"
              >
              </el-table-column>
              <el-table-column
                  prop="customer.realName"
                  width="150"
                  label="姓名"
              >
              </el-table-column>
              <el-table-column prop="customer.sex" width="60" label="性别">
                <template slot-scope="scope">
                  <span v-if="scope.row.customer.sex==1" style="color: #fff">男</span>
                  <span v-else-if="scope.row.customer.sex==2" style="color: #fff">女</span>
                  <span v-else style="color: #fff">-</span>
                </template>
              </el-table-column>
              <el-table-column  prop="customer.mobile"  label="联系电话"></el-table-column>

              <el-table-column
                  prop="customer.birthday"
                  label="出生日期"
              >
              </el-table-column>
              <el-table-column
                  prop="postName"
                  label="求职意向"
              >
              </el-table-column>

            </el-table>
          </div>
        </template>
        <template v-if="type==1">
          <div class="cover-bottom">
            <el-table
                :data="tableData"
                style="width: 100%;">
              <el-table-column
                  prop="id"
                  label="序号"
                  width="100"
              >
              </el-table-column>
              <el-table-column
                  prop="realName"
                  width="100"
                  label="姓名"
              >
              </el-table-column>
              <el-table-column prop="sexText" width="100" label="性别">

              </el-table-column>
              <el-table-column  prop="mobile"  label="联系电话">

              </el-table-column>

              <el-table-column
                  prop="birthFromIdCard"
                  label="出生日期"
              >
              </el-table-column>
              <el-table-column
                  prop="practiceState"
                  label="人员状态"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.practiceState==1" style="color: #fff">务农</span>
                  <span v-else-if="scope.row.practiceState==2" style="color: #fff">务工</span>
                  <span v-else style="color: #fff">暂无</span>
                </template>
              </el-table-column>
<!--              <el-table-column-->
<!--                  prop="isHelp"-->
<!--                  label="是否已帮扶"-->
<!--              >-->
<!--                <template slot-scope="scope">-->
<!--                  <span v-if="scope.row.isHelp==1" style="color: #fff">是</span>-->
<!--                  <span v-else style="color: #fff">否</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
          </div>
        </template>
        <template v-if="type==2">
          <div class="cover-bottom">
            <el-table
                :data="tableData"
                style="width: 100%;">
              <el-table-column
                  prop="id"
                  label="序号"
                  width="100"
              >
              </el-table-column>
              <el-table-column
                  prop="realName"
                  width="100"
                  label="姓名"
              >
              </el-table-column>
              <el-table-column prop="sexText" width="100" label="性别">

              </el-table-column>
              <el-table-column  prop="mobile"  label="联系电话">

              </el-table-column>

              <el-table-column prop="wishWork" width="100" label="就业意愿">
                <template slot-scope="scope">
                  <span v-if="scope.row.wishWork==1" style="color: #fff">是</span>
                  <span v-else style="color: #fff">否</span>
                </template>
              </el-table-column>
              <el-table-column prop="whetherTrain" width="100" label="培训意愿">
                <template slot-scope="scope">
                  <span v-if="scope.row.whetherTrain==1" style="color: #fff">是</span>
                  <span v-else style="color: #fff">否</span>
                </template>
              </el-table-column>
              <el-table-column prop="isHelp" width="100" label="是否已帮扶">
                <template slot-scope="scope">
                  <span v-if="scope.row.isHelp==1" style="color: #fff">是</span>
                  <span v-else style="color: #fff">否</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
        <template v-if="type==3">
          <div class="cover-bottom">
            <el-table
                :data="tableData"
                style="width: 100%;">
              <el-table-column
                  prop="id"
                  label="序号"
                  width="100"
              >
              </el-table-column>
              <el-table-column
                  prop="realName"
                  width="100"
                  label="姓名"
              >
              </el-table-column>
              <el-table-column prop="sexText" width="100" label="性别">

              </el-table-column>
              <el-table-column  prop="mobile"  label="联系电话">

              </el-table-column>

              <el-table-column
                  prop="birthFromIdCard"
                  label="出生日期"
              >
              </el-table-column>
              <el-table-column  prop="wishWorkText"  label="就业意向">
                <template slot-scope="scope">
                  <span style="color: #fff">{{scope.row.wishWorkText?scope.row.wishWorkText:'暂无'}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
        <div class="paging">
          <el-pagination
              background
              :page-size="limit"
              layout="prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.page">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getStreetDatatApi,
  getVillageListtApi,
  intentionsListApi,
  jtGetStreetDataApi,
  ruralListApi,
  unemployedListApi,
} from "@/api/statistics-1";
import {
   resumeListApi,
  seekersListApi,
} from "@/api/statistics-3";
export default {
  name: "Cover",
  props:['id','closeDialog1','type','name'],
  data() {
    return{
      count: 2,
      page: 1,
      limit: 8,
      limit1: 5,
      isShow: true,
      streetId: '',
      communityId:'',
      streetList:[],
      communityList: [],
      tableData: [

      ]
    }
  },
  methods:{
    onCloseDialog(item)
    {
      console.log(item)
      this.closeDialog1(0)
    },
    close(){
      this.isShow=false
    },
    changeStreet(){
     this.getList()
    },
    changeCommunity(){
      this.getList()
    },
    getStreetList(){
      if(this.id==1&&this.type==2)
      {
        getStreetDatatApi({}).then((res)=>{
          if(res.code===200){
            this.streetList = res.data
          }
        })
      }
      if(this.id==2&&this.type==2)
      {
        jtGetStreetDataApi({}).then((res)=>{
          if(res.code===200){
            this.streetList = res.data
          }
        })
      }


    },
    getVillageList(){
      if(this.type==1)
      {
        getVillageListtApi({}).then((res)=>{
          if(res.code===200){
            this.communityList = res.data
          }
        })
      }
    },
    getList(){
      let streetId = '';
      if(typeof this.streetId!=='number'){
        streetId=this.streetId[1];
      }
      //全市农村劳动力
     if(this.type==1){
       ruralListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:streetId}).then((res)=>{
         if(res.code===200){
           this.tableData = res.data.records
           this.count=res.data.total
           console.log(this.tableData)
         }
       })
     }
      //城镇未就业
      if(this.type==2){
        unemployedListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total
          }
        })
      }
      //城镇有就业意愿
      if(this.type==3){
        intentionsListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total
          }
        })
      }
      //注册人数列表
      if(this.type==5){
        seekersListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total
          }
        })
      }
      //简历投递人列表
      if(this.type==6){
        resumeListApi({page:this.page,limit:this.limit1,communityId:this.communityId,streetId:streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.list
            this.count=res.data.count
          }
        })
      }
    },
    handleSizeChange(e) {
      this.limit = e
      this.getList()
    },
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage',this.page)
      this.getList()
    },
  },
  mounted() {
    this.fairActive = this.id
    this.getList()
    this.getStreetList()
    this.getVillageList()
  },
}
</script>

<style lang="scss" scoped>
.content{
  .cover{
    position: relative;
    width: 52%;
    height: auto;
    min-height: 60vh;
    background-color: #0A1456;
    border-radius: 15px;
    padding: 20px;
      .cover-top{
        display: flex;
        justify-content: space-between;
        .top-left{
          display: flex;
          .sign{
            background-color: #498CF3;
            width: 10px;
            height: 20px;
            border-radius: 15px;
            margin-right: 15px;
          }
          .title{
            color: #ffffff;
          }
        }
        .top-right{
          color: #2FA1F9;
          font-size: 20px;
          cursor: pointer;
          margin-right: 5px;
        }
      }
    .cover-middle{
      display: flex;
      margin: 20px 0;
      .street{
        color: #ffffff;
        margin-right: 20px;
        ::v-deep{
          .el-input__icon{
            height: 116%;
          }
          .el-input__inner{
            display: flex;
            align-items: center;
            background-color: #0A1456;
            border: 1px solid #216CBB;
            height: 30px;
            width: 180px;
          }
          .el-select-dropdown__list{
            background-color: #0A1456;

          }
        }
      }
      .village{
        color: #ffffff;
        ::v-deep{
          .el-input__icon{
            height: 116%;
          }
          .el-input__inner{
            display: flex;
            align-items: center;
            background-color: #0A1456;
            border: 1px solid #216CBB;
            height: 30px;
            width: 180px;
          }
          .el-select-dropdown__list{
            background-color: #0A1456;

          }
        }
      }
    }
    .cover-bottom{
      width: 100%;
      height: calc(100% - 127px);
      overflow: hidden;
      ::v-deep{
      .el-table th.el-table__cell{
        background-color: rgba(72, 75, 147, 0.5);
        text-align: center;
        color: #fff;
      }
        .el-table tr{
          background-color: #0A1456;
        }
        .el-table .el-table__cell{
          background-color: #0A1456;
          border-bottom: 1px solid #394276;
          text-align: center;
        }
        .el-table .cell{
          color: #fff;
        }
      }
    }
    .paging{
      display: flex;
      justify-content: center;
      margin-top: 10px;
      ::v-deep{
        .el-pagination.is-background .btn-prev{
          background-color: rgba(72, 75, 147, 0.5);
          padding: 0 10px;
        }
        .el-pagination.is-background .btn-prev span{
          color: #fff;
        }
        .el-pagination.is-background .btn-next{
          background-color: rgba(72, 75, 147, 0.5);
          padding: 0 10px;
        }
        .el-pagination.is-background .btn-next span{
          color: #fff;
        }
      }
    }
  }
}
</style>
